<template>
  <div>
    <!--表格栏-->
    <el-table :data="data.results" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange"
              @current-change="handleCurrentChange" v-loading="loading" element-loading-text="loading..."
              :border="border"
              :stripe="stripe" :show-overflow-tooltip="showOverflowTooltip" :max-height="maxHeight" :size="size"
              :align="align"
              style="width:100%;">
      <el-table-column type="selection" width="40" v-if="showBatchDelete & showOperation"></el-table-column>
      <el-table-column v-for="column in columns" header-align="center" align="center" :prop="column.prop"
                       :label="column.label"
                       :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :key="column.prop"
                       :type="column.type"
                       :formatter="column.formatter" :sortable="column.sortable==null?true:column.sortable">
      </el-table-column>
      <el-table-column width="185" fixed="right" v-if="showOperation"
                       header-align="center"
                       align="center">
        <template slot-scope="scope">
          <el-button icon="fa fa-edit" :size="size"
                     @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button icon="fa fa-trash" :size="size" type="danger"
                     @click="handleDelete(scope.$index, scope.row)">{{ delbuttext }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <el-button
        :size="size" type="danger" @click="handleBatchDelete()"
        :disabled="this.selections.length===0" style="float:left;" v-if="showBatchDelete & showOperation">
        批量删除
      </el-button>
      <el-pagination layout="total, prev, pager, next, jumper" @current-change="refreshPageRequest"
                     :current-page="pageRequest.pageNum"
                     :page-size="pageRequest.pageSize" :total="data.count" style="float:right;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'KtTable',
    props: {
      columns: Array, // 表格列配置
      data: Object, // 表格分页数据
      size: { // 尺寸样式
        type: String,
        default: 'mini'
      },
      align: { // 文本对齐方式
        type: String,
        default: 'left'
      },
      maxHeight: { // 表格最大高度
        type: Number,
        default: 420
      },
      showOperation: { // 是否显示操作组件
        type: Boolean,
        default: true
      },
      border: { // 是否显示边框
        type: Boolean,
        default: false
      },
      stripe: { // 是否显示斑马线
        type: Boolean,
        default: true
      },
      highlightCurrentRow: { // // 是否高亮当前行
        type: Boolean,
        default: true
      },
      showOverflowTooltip: { // 是否单行显示
        type: Boolean,
        default: true
      },
      showBatchDelete: { // 是否显示操作组件
        type: Boolean,
        default: true
      },
      opFrom: {  // 来自哪里的操作
        type: String,
        default: "user"
      }
    },
    data() {
      return {
        // 分页信息
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        loading: false, // 加载标识
        selections: [], // 列表选中列
        delbuttext: '删除'

      }
    },
    methods: {
      // 分页查询
      findPage: function () {
        this.loading = true
        let callback = res => {
          this.loading = false
        }
        this.$emit('findPage', {
          pageRequest: this.pageRequest,
          callback: callback
        })
      },
      // 选择切换
      selectionChange: function (selections) {
        this.selections = selections
        this.$emit('selectionChange', {
          selections: selections
        })
      },
      // 选择切换
      handleCurrentChange: function (val) {
        this.$emit('handleCurrentChange', {
          val: val
        })
      },
      // 换页刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum
        this.findPage()
      },
      // 编辑
      handleEdit: function (index, row) {
        this.$emit('handleEdit', {
          index: index,
          row: row
        })
      },
      // 删除
      handleDelete: function (index, row) {
        if (this.opFrom === 'user') {
          this.deleteuser(row)
        } else if (this.opFrom === 'code') {
          this.deletecode(row)
        } else if (this.opFrom === 'order') {
          this.$message({
            message: '订单不允许删除！！！',
            type: 'error'
          })
        }
      },
      // 批量删除
      handleBatchDelete: function () {
        this.$message({
          message: '此系统暂未开放批量删除！请联系管理员！',
          type: 'warning'
        })
      },
      deleteuser: function (row) {
        let params = {  // 传递到主页面进行删除
          username: row.username
        }
        this.$confirm('确认封禁用户吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.loading = true
          let callback = res => {
            if (res.success === 'yes') {
              this.$message({
                message: '封禁成功',
                type: 'success'
              })
              // this.findPage()
            } else {
              this.$message({
                message: '封禁失败, ' + res.msg,
                type: 'error'
              })
            }
            this.loading = false
          }
          this.$emit('handleDelete', {
            params: params,
            callback: callback
          })
        }).catch(() => {
        })
      },
      deletecode: function (row) {
        let params = {  // 传递到主页面进行删除
          code: row.code
        }
        this.$confirm('确认使此密钥失效吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.loading = true
          let callback = res => {
            if (res.success === 'yes') {
              this.$message({
                message: '此密钥已失效',
                type: 'success'
              })
              this.findPage()
            } else {
              this.$message({
                message: '操作失败,请稍后重试' + res.msg,
                type: 'error'
              })
            }
            this.loading = false
          }
          this.$emit('handleDelete', {
            params: params,
            callback: callback
          })
        }).catch(() => {
        })

      },
      // 删除操作
      delete: function (ids) {
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          let params = []
          let idArray = (ids + '').split(',')
          for (var i = 0; i < idArray.length; i++) {
            params.push({
              'id': idArray[i]
            })
          }
          this.loading = true
          let callback = res => {
            if (res.code == 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.findPage()
            } else {
              this.$message({
                message: '操作失败, ' + res.msg,
                type: 'error'
              })
            }
            this.loading = false
          }
          this.$emit('handleDelete', {
            params: params,
            callback: callback
          })
        }).catch(() => {
        })
      }
    }
    ,
    mounted() {
      this.refreshPageRequest(1)
      console.log(this.opFrom)
      if (this.opFrom === 'user') {  // 来自不同的页面产生不同的按钮字符
        this.delbuttext = '封禁'
      } else if (this.opFrom === 'code') {
        this.delbuttext = '失效'
      }
    }
  }
</script>

<style scoped>

</style>
